import React, { useState, useEffect } from 'react'
import axios from 'axios'
import { Card, Image, Flex } from 'react-vant';
import { Sign, Down } from '@react-vant/icons';
import "./project.css"

function Leave() {
    const [team, setTeam] = useState([])
    const getTeam = async () => {
        const res = await axios.get('http://192.168.0.154:3000/my/prohect')
        setTeam(res.data)
    }
    useEffect(() => {
        getTeam()
    }, [])

    return (
        <div>
            {
                team.map(item => {
                    return (
                        <Card round key={item.id} style={{ width: '100%', height: '268px', backgroundColor: 'white', marginTop: '20px', postion: "relative" }}>
                            <Card.Header><Image width={48} height={48} src={item.avatar} round style={{ BrowserRouter: '10px' }} /></Card.Header>
                            <div style={{ width: "60%", position: 'absolute', top: '5px', right: "73px" }}>
                                <Card.Body style={{ fontSize: "14px", color: "rgb(145, 146, 158)" }}>{item.biaohao}</Card.Body>
                                <Card.Body style={{ fontSize: "15px" }}>{item.name}</Card.Body>

                            </div>
                            <div style={{ display: 'flex', alignItems: 'center', marginLeft: '30px', color: "rgb(125, 133, 146)", position: "relative" }}>
                                <Sign fontSize={"20px"} />
                                <span style={{ marginLeft: '5px' }}>{item.shijian}</span>
                                <p style={{ display: 'flex', alignItems: 'center', marginLeft: '30px', color: "rgb(125, 133, 146)", position: "absolute", right: "50px", color: item.dengji === "中" ? "rgb(255, 189, 33)" : "rgb(10, 201, 71)" }}>
                                    <Down fontSize={"20px"} rotate={item.dengji === "中" ? 180 : 0} />
                                    <span style={{ marginLeft: '5px', fontSize: "18px" }}>{item.dengji}</span>
                                </p>
                            </div>
                            <hr style={{ width: "295px", textAlign: 'center', margin: '20px auto' }}></hr>
                            <Card.Header>项目数据</Card.Header>
                            <Flex gutter={16} wrap='wrap' style={{ width: "95%", margin: '0 auto' }}>
                                <Flex.Item span={8} style={{ color: "rgb(145, 146, 158)" }}>所有任务</Flex.Item>
                                <Flex.Item span={8} style={{ color: "rgb(145, 146, 158)" }}>当前任务</Flex.Item>
                                <Flex.Item span={8} style={{ color: "rgb(145, 146, 158)" }}>执行人</Flex.Item>
                                <Flex.Item span={8}>{item.suoyourenwu}</Flex.Item>
                                <Flex.Item span={8}>{item.dangqianrenwu}</Flex.Item>
                                <Flex.Item span={8}>
                                    <div className="avatar-stack" style={{marginTop:"-10px"}}>
                                        <img src={item.img3} className="avatar" style={{ zIndex: 1 }} />
                                        <img src={item.img2} className="avatar" style={{ zIndex: 2 }} />
                                        <img src={item.img1} className="avatar" style={{ zIndex: 3 }} />
                                    </div>
                                </Flex.Item>
                            </Flex>
                        </Card>
                    )
                })
            }
        </div>
    )
}

export default Leave

